<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        >
          <el-table-column type="selection" width="50" >  
          </el-table-column>
          <el-table-column
            prop="subjectId"
            label="课题编号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="课题名称"
            width="300">
          </el-table-column>
          <el-table-column
            prop="primaryNum"
            label="预选人数"
            width="150"
            >
          </el-table-column>
          <el-table-column
            prop="selectedNum"
            label="已选人数"
            width="150">
          </el-table-column> 

        
         <el-table-column
            fixed="right"
            label="操作"
        
            >
            <template slot-scope="scope"   >
              
                <el-button type="primary"   v-if="((scope.row.primaryNum != scope.row.selectedNum && selectedSubjectId==''))" id="issure" width="80"   icon="el-icon-unlock" size="mini"  @click="updateSelect(scope.row)">选择</el-button>
                <el-button type="warning"   v-if="((scope.row.primaryNum != scope.row.selectedNum && selectedSubjectId==scope.row.subjectId))" id="cancel" width="80"    icon="el-icon-unlock" size="mini" @click="updateSelect(scope.row)">取消</el-button>
   
            </template>
           </el-table-column>
        </el-table>
    </div>
  </div>
</template>
<script>
 import logapi from '@/api/login'
 import stuapi from '@/api/subject/student'
 import  api from '@/api/subject/subjectApi'
import { getToken } from '../../../../utils/auth'
  export default {
   
    data() {
      return {
        tableData: [],
        classid:'',
        stuId:'',
        student:{},
        inputform:{
          courseClassId:''
        },
        selectedSubjectId:'',
        sy1:1,
        sy2:1

      }
    },
    created(){
       
      
       this.isLoad()
       

    },
    methods:{
      getStudentId(){
         console.log("74")
        logapi.getUserName(getToken())
          .then(response =>{
              this.stuId = response.data;
              console.log(response.data)
               this.getStudentInfo();
              this. getStudentSeletedSubject()
          
          
            

          })

      },
      getStudentInfo(){
  
        stuapi.getStudentInfo(this.stuId)
        .then(response =>{
          this.student= response.data;
           this.getSubjectList();
          
        })

      },
      getSubjectList(){
        
        api.getsubjectSelectList(this.student.className)
        .then(responnse =>{
         
          this.tableData = responnse.data
           

        })
      },
      getStudentSeletedSubject(){
        stuapi.getStudentSelectSubject(this.stuId)
        .then(response =>{
          this.selectedSubjectId = response.data.subjectId;
        })
      },
      isLoad(){
         this.getStudentId()
    
        
         
        

      },
      updateSelect(row){
        if(this.selectedSubjectId==''){
          stuapi.studentSelectSubject(row.subjectId,this.stuId)
          .then(response =>{
              this.getSubjectList();
              this.$message({
                  message: '添加成功',
                  type: 'success'
                });
            window.reload()
                   //刷新页面

          })
          
          
        }else{
          stuapi.studentCancelSubject(this.stuId)
           .then(response =>{
              this.getSubjectList();
              this.$message.error('删除成功');
              window.reload()
              //刷新页面

          })
        }

      }

    }

  }

  
</script>
<style lang="scss" scoped>
.el-table{
  width: 80%;
  margin: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

</style>
<style >
.showbutton{

  display: inline-block;
}
.hiddenButton{
  display: none;

}

</style>
